<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <meta property="og:image" content="" />
  <meta name="keywords" content="">
  <meta name="description" content="">
<style>
  header .phone {
    position: absolute;
    background: #111;
    border-radius: 55px;
    box-shadow: 0 0 0 2px #aaa;
    top: -50px;
    left: 50%;
    margin-left:-200px;
    width: 320px;
    height: 568px;
    padding: 105px 25px;
  }
  header .phone:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    bottom: 20px;
    border-radius: 100%;
    box-sizing: border-box;
    border: 5px solid #333;
  }
  header .phone:before {
    content: '';
    width: 60px;
    height: 10px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    background: #333;
    top: 50px;
  }
  header .phone .statusbar {
    position: absolute;
    width: 320px;
    height: 20px;
    background: url(/static/app/f7ui/demo/img/status-bar.png);
    left: 50%;
    margin-left: -160px;
    top: 100px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  header .phone iframe {
    height: 548px;
    display: block;
    width:320px;
    margin-top: 20px;
  }
  header .phone.phone-android iframe {
    width: 360px;
    height: 615px;
    margin-top: 25px;
  }
</style>
</head>
<body>
<header>
  <div class="center">
    <div class="phone">
      <iframe src="/static/fmui/saltui2.0/demo2.0/dist/index.html" frameborder="0" scrolling="yes"></iframe>
      <div class="statusbar"></div>
    </div>
  </div>
</header>
<div class="clearfix"></div>


</body>
</html>
